// =============================================================================
// SCSS/SITE/STACKS/ETHOS/_LABELS-BADGES.SCSS
// -----------------------------------------------------------------------------
// Label and annotate text and utilize badges for indicators and unread counts.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Base Styles
//   02. Colors
//   03. Labels and Badges in Buttons
// =============================================================================

// Base Styles
// =============================================================================

.x-label,
.x-badge {
  display: inline-block;
  @include font-size(13px);
  font-weight: bold;
  line-height: 1;
  color: $white;
  vertical-align: baseline;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: $grayLight;
}


//
// Set unique padding and border-radii.
//

.x-label {
  padding: 0.77em 0.308em 0.154em;
  border-radius: 3px;
}

.x-badge {
  padding: 0.77em 0.692em 0.154em;
  border-radius: 100%;
}


//
// Hover state, but only for links.
//

a {
  &.x-label:hover,
  &.x-badge:hover {
    color: $white;
    text-decoration: none;
    cursor: pointer;
  }
}



// Colors
// =============================================================================

//
// Important (red).
//

.x-label-important,
.x-badge-important {
  background-color: $errorText;
}

.x-label-important[href],
.x-badge-important[href] {
  background-color: darken($errorText, 10%);
}


//
// Warnings (orange).
//

.x-label-warning,
.x-badge-warning {
  background-color: $orange;
}

.x-label-warning[href],
.x-badge-warning[href] {
  background-color: darken($orange, 10%);
}


//
// Success (green).
//

.x-label-success,
.x-badge-success {
  background-color: $successText;
}

.x-label-success[href],
.x-badge-success[href] {
  background-color: darken($successText, 10%);
}


//
// Info (turquoise).
//

.x-label-info,
.x-badge-info {
  background-color: $infoText;
}

.x-label-info[href],
.x-badge-info[href] {
  background-color: darken($infoText, 10%);
}


//
// Inverse (black).
//

.x-label-inverse,
.x-badge-inverse {
  background-color: $grayDark;
}

.x-label-inverse[href],
.x-badge-inverse[href] {
  background-color: darken($grayDark, 10%);
}



// Labels and Badges in Buttons
// =============================================================================

.x-btn {
  .x-label,
  .x-badge {
    position: relative;
    top: -1px;
  }
}

.x-btn-mini {
  .x-label,
  .x-badge {
    top: 0;
  }
}